<script setup>
import {navs} from "@/apis/system/v1/analysis.js";

// 判断加载是否完成
const loading = ref(true);
const navsList = ref(8);

onMounted(() => {
  navs().then(res => {
    if (res.code === 200) {
      navsList.value = res.result;
      loading.value = false;
    }
  })
});
</script>

<template>
  <a-skeleton v-if="loading" class="jia-skeleton" :animation="true" :loading="loading">
    <div class="jia-grid">
      <div class="item" style="grid-column: span 1 / span 1;" v-for="(item, index) in navsList" :key="index">
        <div class="cursor-pointer">
          <p style="display: flex; justify-content: center;">
            <a-skeleton-line :rows="1" :widths="[50]" :line-height=28></a-skeleton-line>
          </p>
          <p style="display: flex; justify-content: center">
            <a-skeleton-line :rows="1" :widths="[55]" :line-height=20></a-skeleton-line>
          </p>
        </div>
      </div>
    </div>
  </a-skeleton>
  <div v-else class="jia-grid">
    <div class="item" style="grid-column: span 1 / span 1;" v-for="(item, index) in navsList" :key="index">
      <div class="cursor-pointer">
        <p style="display: flex; justify-content: center">
          <img style="width: 32px; height: 32px;" :src="item.image" alt="nav">
        </p>
        <p style="display: flex; justify-content: center">
          <span style="font-size: 14px">{{ item.title }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.jia-grid {
  margin-top: 15px;
  width: 100%;
  height: 120px;
  display: grid;
  grid-template-columns: repeat(8, minmax(0px, 1fr));
  gap: 8px 16px;
  animation: FadeInRight 2s;

  .item {
    width: 197px;
    height: 120px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    background: var(--bg-3);
    transition: all .3s ease-in;

    &:hover {
      transform: translateY(-5%);
    }

    .cursor-pointer {
      cursor: pointer;
      width: 197px;
      height: 68px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

  }

}
</style>